<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row @keydown.enter.native="handleSearch">
                        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
                            <Form-item label="时间" prop="sj">
                              <DatePicker v-model="selectDate" :editable="false" :options="options2" type="daterange" format="yyyy-MM-dd"  :clearable="false" @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
                            </Form-item>
                            <Form-item style="margin-left:-35px;" class="br">
                                <Button @click="getDataList" type="primary" icon="ios-search">搜索</Button>
                                <Button type="primary" @click="exportData" style="float:right;margin-bottom:10px">导出</Button>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row>
                        <Alert show-icon>
                            各镇(街道)巡河问题发现整改统计（{{startTime}}至{{endTime}}）
                        </Alert>
                    </Row>
                    <Row>
                        <Table :loading="loading" height="460" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect" ></Table>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>
<!--<script src="js/xlsx.extendscript.js"></script>-->
<script>
    import excel from "@/libs/excel";
    import { toExportExcel } from "@/excel/Export2Excel1";
    export default {
        name: "riverPatrol",
        components: {
            toExportExcel
        },
        data() {
            return {
                loading: true, // 表单加载状态
                selectDate:null,
                startTime: "", // 起始时间
                endTime: "" ,// 终止时间
                searchForm: { // 搜索框初始化对象
                    startDate: "", // 起始时间
                    endDate: "" // 终止时间
                },
                columns: [
                    {
                        title: "镇(街道)",
                        key: "deptName",
                        align: 'center',
                        // width: 90,
                        sortable: false,
                    },
                    {
                        title: "巡管员巡查次数",
                        key: "patrolNum",
                        align: 'center',
                        // width: 90,
                        sortable: false,
                    },
                    {
                        title: "发现问题个数",
                        key: "issueNum",
                        align: 'center',
                        // width: 90,
                        sortable: false,
                    },
                    {
                        title: "巡管员人数",
                        key: "personRiverNum",
                        align: 'center',
                        // width: 90,
                        sortable: false,
                    },
                    {
                        title: "人均发现问题数",
                        key: "personFindProblem",
                        align: 'center',
                        // width: 90,
                        sortable: false,
                    },{
                        title: "问题整改率(%)",
                        key: "personEndRate",
                        align: 'center',
                        // width: 90,
                        sortable: false,
                    }
                ],
                data:[],
                options2: {
                    shortcuts: [
                        {
                            text: '当月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setDate(1);
                                return [start, end];
                            }
                        },
                        {
                            text: '近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '近30天',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '近三月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        },
                        {
                            text: '近一年',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                                return [start, end];
                            }
                        }
                    ]
                }
            };
        },
        methods: {
            init() {
                this.setTime();

            },
            exportData(){
                // this.exportTitle = "确认导出全部 " + this.total + " 条数据";
                // let a = [];
                // a.push();
                const params = {
                    title: ["镇(街道)","巡管员巡查次数","发现问题个数","巡管员人数","人均发现问题数","问题整改率%"],
                    // a: ["镇(街道)","巡管员巡查次数","发现问题个数","巡管员人数","人均发现问题数","问题整改率%"],
                    key: [ "deptName", "patrolNum","issueNum", "personRiverNum","personFindProblem","personEndRate"],

                    // a: [],
                    // key: [ ],
                    data: this.data,
                    autoWidth: true,
                    // filename: "各镇(街道)巡河问题发现整改统计"
                    filename: "各镇街道巡河问题发现整改"+this.startTime+"至"+this.endTime+"",
                };
                toExportExcel(params);
            },


            setTime(){
                let date = new Date();
                let end = date.toLocaleDateString().replace(/\//g, '-');
                date.setDate(1);
                let start =date.toLocaleDateString().replace(/\//g, '-');
                this.selectDate = [start,end];
                this.startTime = start;
                this.endTime = end;
                this.searchForm.startDate = start+" 00:00:00";
                this.searchForm.endDate = end+" 23:59:59";
                this.getDataList();
                //this.handleSummary(columns,date);
            },
            selectDateRange(v) {
                if (v) {
                    this.startTime = v[0];
                    this.endTime = v[1];
                    this.searchForm.startDate = v[0]+" 00:00:00";
                    this.searchForm.endDate = v[1]+" 23:59:59";
                }
            },
            getDataList() {
                this.loading = true;
                // 带多条件搜索参数获取表单数据 请自行修改接口
                this.postRequest("/river/getRiverPatrolForm", this.searchForm).then(res => {
                  this.loading = false;
                  if (res.success) {
                    this.data = res.result;
                  }
                });
                // 以下为模拟数据
                //this.data = [
                //];
                // this.loading = false;
            },

        },
        mounted() {
            this.init();
        }
    };
</script>
<style lang="less">
    .search {
        .operation {
            margin-bottom: 2vh;
        }
        .select-count {
            font-size: 13px;
            font-weight: 600;
            color: #40a9ff;
        }
        .select-clear {
            margin-left: 10px;
        }
        .page {
            margin-top: 2vh;
        }
        .drop-down {
            font-size: 13px;
            margin-left: 5px;
        }
    }
</style>